<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <!-- input 和 textarea 使用v-model实现数据双向绑定 -->
    <div id="app">
        <p>input元素：</p>
        <input type="text" v-model="message" placeholder="编辑我！！">
        <p>消息：{{message}}</p>

        <p>textarea元素：</p>
        <p style="white-space: pre">{{message2}}</p>
        <textarea cols="30" rows="10" v-model="message2" placeholder="多行文本输入。。"></textarea>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                message: "666666",
                message2: "text vue index"
            }
        })
    </script>
</body>

<body>
    <!-- 复选框如果只有一个值，则为逻辑值，如果是多个则返回一个数组 -->
    <div id="app2">
        <!-- 复选框的数据双向绑定 -->
        <p>单个复选框：</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>

        <p>多个复选框：</p>
        <input type="checkbox" id="runoob" valiue="runoob" v-model="checkName">
        <label for="runoob">runoob</label>
        <input type="checkbox" id="google" value="google" v-model="checkName">
        <label for="google">google</label>
        <input type="checkbox" id="baidu" value="baidu" v-model="checkName">
        <label for="baidu">baidu</label>
        <br>
        <span>选择的值为：{{checkName}}</span>
    </div>

    <script>
        new Vue({
            el: "#app2",
            data: {
                checked: false,
                checkName: []
            }
        })
    </script>
</body>

<body>
    <div id="app3">
        <input type="radio" id="runoob" value="Runoob" v-model="picked">
        <label for="runoob">Runoob</label>
        <br>
        <input type="radio" id="google" value="Google" v-model="picked">
        <label for="google">Google</label>
        <br>
        <span>Selected Value is {{ picked }}</span>
    </div>

    <script>
        new Vue({
            el: "#app3",
            data: {
                picked: "Runoob"
            }
        })
    </script>
</body>

<body>
    <div id="app4">
        <!-- 下拉列表数据双向绑定 -->
        <select name="fruit" v-model="Selected">
            <option value="">选择一个网站</option>
            <option value="http://www.runoob.com">Runoob</option>
            <option value="http://www.taobao.com">Tagbao</option>
        </select>
        <div id="output">
            您选择的网站是：{{ Selected }}
        </div>
    </div>

    <script>
        new Vue({
            el: "#app4",
            data: {
                Selected: ""
            }
        })
    </script>
</body>

<body>
    <!-- 修饰符 -->
    <div id="test">
        <!-- .lazy 在默认情况下，v-model和input会同步输入框中的值和数据，
            但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步： -->

        <!-- 在 "change" 而不是 "input" 事件中更新 -->
        <input v-model.lazy="msg">

        <!--  .number如果想自动将用户的输入值转为 Number 类型
            （如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值： -->
        <input v-model.number="age" type="number">
        <!-- 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。 -->

        <!-- .trim 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入： -->
        <input v-model.trim="msg">
    </div>
</body>

</html>